<template>
  <!-- 排行榜评论 -->
  <div id="comment">
    <van-nav-bar
      fixed
      style="z-index: 99999"
      :title="'评论(' + songTotal + ')'"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <nav class="nav"></nav>
    <van-tabs v-model="active">
      <van-tab title="推荐">
        <van-list
          v-model="loading"
          ref="vanList"
          :finished="finished"
          offset="10"
          finished-text="没有更多了"
          @load="recommendOnLoad"
        >
          <van-card
            class="van-hairline--bottom"
            v-for="(comment, index) in recommendList"
            :key="index"
            :price="comment.content"
            :desc="comment.time | commitTime"
            :title="comment.user.nickname"
            :thumb="comment.user.avatarUrl"
            currency=""
          >
          </van-card>
        </van-list>
      </van-tab>
      <van-tab title="最热">最热</van-tab>
      <van-tab title="最新">最新</van-tab>
    </van-tabs>
    <Loading :loadingShow="loadingShow" />
  </div>
</template>

<script>
import Loading from "@/components/loading";
import { getCommentPlaylist } from "@/api/songSheet";
import { releaseTime } from "../../../currency";
export default {
  name: "comment",
  data() {
    return {
      limit: 25,
      songTotal: 0,
      active: 0,
      songId: "",
      recommendList: [],
      loadingShow: false,
      loading: true,
      finished: false,
    };
  },
  components: { Loading },
  filters: {
    commitTime(value) {
      return releaseTime(value);
    },
  },
  methods: {
    recommendOnLoad() {
      this.loading = true;
      this.limit = this.limit + 10;
      this.initData(this.songId);
    },
    initData(id) {
      this.songId = id;
      this.loadingShow = true;
      getCommentPlaylist(id, this.limit).then((res) => {
        this.songTotal = res.total;
        this.recommendList = res.comments;
        if (this.limit >= 90) {
          this.finished = true;
        }
        this.loading = false;
        this.loadingShow = false;
      });
    },
  },
  mounted() {
    this.initData(this.$route.query.id);
    this.$refs.vanList;
  },
};
</script>

<style scoped>
/* #comment /deep/ .van-tabs__wrap {
  width: 33.333%;
  float: right;
} */

#comment .nav {
  margin-top: 45px;
}
#comment .van-card {
  background-color: #fff;
}
#comment .van-card__thumb {
  width: 35px;
  height: 35px;
  border-radius: 50% !important;
}
#comment /deep/ .van-card__thumb img {
  border-radius: 50%;
}
#comment .van-card__bottom {
  position: absolute;
  top: 50%;
}
#comment .van-card__header {
  height: 70px;
}
</style>